<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>师资详情</title>
		<!-- import Vue before Element -->
		<script src="../static/js/vue.js"></script>
		<!-- import JavaScript -->
		<script src="../static/js/element.js"></script>
		<script src="../static/js/axios.js"></script>
		<link rel="stylesheet" href="../static/elementui/theme-chalk/index.css">
	</head>
	<style type="text/css">
		.head {
			width: 90%;
			margin: auto;
			height: 80px;
			line-height: 80px;
		}
		.body {
			/* height: 400px; */
			width: 90%;
			margin: auto;
			border-radius: 4px;
			box-shadow: 0 6px 10px rgba(0, 0, 0, .24), 0 8px 8px rgba(0, 0, 0, .12)
		}
		.title {
			height: 40px;
			line-height: 40px;
			border-bottom: #000000 solid 1px;
			padding-left: 20px;
			box-sizing: border-box;
		}
		.pagechose{
			float: right;
		}
		a:link,a:visited,a:hover,a:active{
			color: #40AFFE;
			text-decoration: none;
		}
	</style>
	<body>
		<div id="element">
			<div class="head">
				<span style="font-family: PingFang SC;font-size: 20px;">
					师资管理
				</span>
				<i class="el-icon-document-copy"></i>
				<span style="font-family: PingFang SC;font-size: 18px;">
					- 师资列表
				</span>
			</div>
			<div class="body">
				<div class="title">
					<span style="font-family: PingFang SC;font-size:16px;">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;师资列表
					</span>
				</div>
				<div style="height: 10px;">
				</div>&nbsp;&nbsp;&nbsp;&nbsp;
				<el-button type="primary" @click="add">新增老师</el-button>
				<div style="height: 10px;">
				</div>
				<table border="0" cellspacing="0" cellpadding="10" width="100%" style="text-align: center;">
					<tr>
						<td>项目:</td>
						<td>姓名:</td>
						<td>推荐:</td>
						<td>
							<el-button @click="reback" type="warning">重置</el-button>
						</td>
					</tr>
					<tr>
						<td>
							<el-select v-model="project" placeholder="请选择">
								<el-option
										v-for="item in projectOptions"
										:key="item.value"
										:label="item.label"
										:value="item.value">
								</el-option>
							</el-select>
						</td>
						<td>
							<el-input v-model="input" placeholder="请输入内容"></el-input>
						</td>
						<td>
							<template>
								<el-radio v-model="radio" label="1">未推荐</el-radio>
								<el-radio v-model="radio" label="2">推荐</el-radio>
							</template>
						</td>
						<td><el-button type="primary" @click="find">查询</el-button></td>
					</tr>
				</table>
				<div style="margin-left: 25px"><el-button type="info" icon="el-icon-user">老师列表</el-button></font></div>
				<div class="data">
					<template>
						<el-table :data="teacherData" height="400" style="width: 96%;margin: auto;">
							<el-table-column prop="projectBean.projName" label="项目" align="center">
							</el-table-column>
							<el-table-column prop="teacherName" label="姓名" align="center">
							</el-table-column>
							<el-table-column  label="图片" align="center">
							　　<template slot-scope="scope">
							　　　　<img :src="scope.row.image" width="40" height="40" class="head_pic"/>
							　　</template>
							</el-table-column>
							<el-table-column prop="descr" label="介绍" align="center">
							</el-table-column>
							<el-table-column  label="公开课" align="center">
							　　<template slot-scope="scope">
							　　　　<img :src="scope.row.videoImage" width="40" height="40" class="head_pic"/>
							　　</template>
							</el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<span v-if="scope.row.recommend == 2">
										<a @click="cancel(scope.row.id)" href="#">取消推荐</a>&nbsp;&nbsp;&nbsp;
										<a href="#" @click="update(scope.row.id)">编辑</a>&nbsp;&nbsp;&nbsp;
										<a @click="del(scope.row.id)" href="#">删除</a>
									</span>
									<span v-else>
										<a @click="set(scope.row.id)" href="#">推荐</a>&nbsp;&nbsp;&nbsp;
										<a href="#" @click="update(scope.row.id)">编辑</a>&nbsp;&nbsp;&nbsp;
										<a @click="del(scope.row.id)" href="#">删除</a>
									</span>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</div>
				<div class="pagechose">
					<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="page"
							:page-sizes="[2, 5, 10, 50]"
							:page-size="size"
							layout="total, sizes, prev, pager, next, jumper"
							:total="total">
					</el-pagination>
				</div>
				<div style="clear: both;"></div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		parent.layui.admin.events.closeOtherTabs()
		let allTeacher = []
		let element = new Vue({
			el:"#element",
			data:{
				project:"",
				input:"",
				radio:"1",
				total:0,
				size:2,
				page:1,
				teacherData:[],
				projectOptions:[],
			},
			methods:{
				handleSizeChange:function(val){
					this.size = val
					this.page = 1
					this.teacherData = []
					if(this.total >= val ){
						for(let i=0; i<val; i++){
							this.teacherData.push(allTeacher[i])
						}
					}else {
						for(let i=0; i<this.total; i++){
							this.teacherData.push(allTeacher[i])
						}
					}

				},
				handleCurrentChange:function (val){
					let size = this.size
					this.teacherData = []
					if(val*size > this.total){
						for(let i=size*(val-1); i<this.total; i++){
							this.teacherData.push(allTeacher[i])
						}
					}else{
						for(let i=size*(val-1); i<size*val; i++){
							this.teacherData.push(allTeacher[i])
						}
					}
				},
				cancel:function (id){
					axios.get("cancel?id="+id)
							.then(function () {
								location.reload()
							})
				},
				set:function (id) {
					axios.get("set?id="+id)
							.then(function () {
								location.reload()
							})
				},
				del:function (id) {
					axios.get("del?id="+id)
							.then(function () {
								element.$notify({
									title: '成功',
									message: '删除成功',
									type: 'success'
								});
								location.reload()
							})
				},
				reback:function (){
					this.date = null
					this.project = null
					this.radio = '1'
				},
				find:function (){
					let teacher = {
						projectBean:{
							id:this.project
						},
						teacherName :this.input,
						recommend : parseInt(this.radio)
					}
					axios.post("find",teacher)
							.then(function (res) {
								console.log(res.data)
								element.$data.size = 2
								element.$data.page = 1
								element.$data.total = res.data.length
								allTeacher = res.data
								element.$data.teacherData=[]
								if(allTeacher.length<2){
									for(let i=0; i<allTeacher.length; i++){
										element.$data.teacherData[i] =  res.data[i]
									}
								}else {
									for(let i=0; i<2; i++){
										element.$data.teacherData[i] =  res.data[i]
									}
								}
							})
							.catch(function (error) {
								console.log(error)
							});
				},
				add:function (){
					parent.layui.index.openTabsPage("teacher/addTeacher", "师资新增")
				},
				update:function (id){
					window.sessionStorage.setItem("teacherId", id);
					parent.layui.index.openTabsPage("teacher/updateTeacher", "师资编辑")
				}
			}
		})
		axios.get("findAll")
				.then(function (res) {
					console.log(res.data)
					allTeacher = res.data
					element.$data.total = allTeacher.length
					for(let i=0; i<2; i++ ){
						element.$data.teacherData.push(allTeacher[i])
					}
				})
		axios.get("getProject")
				.then(function (res) {
					let projs = res.data
					for(let i=0; i<projs.length; i++){
						let proj = {
							value:i+1,
							label:projs[i]
						}
						element.$data.projectOptions.push(proj)
					}
				})
	</script>
</html>
